<template>
    <el-row :gutter="20">
        <el-col :span="4.8" v-for="item in residentData">
            <div class="card-menu" @click="toDetail(item._id)">
                <div class="residentMenu-item">
                    <img class="resident-avatar" :src="item.avatar" alt=""
                        style="width: 64px;height: 64px;border-radius: 50%;margin: 16px 0 20px;  box-shadow: 0px 0px 15px rgba(242, 242, 242, 1);">
                    <div class="name-bar">
                        <div class="nameBar">
                            {{ item.name }}
                        </div>
                        <span>26岁</span>
                        <img src="/src/assets/boy.png" alt="" v-if="item.gender"
                            style="width: 14px;height: 14px;margin-left: 5px;">
                        <img src="/src/assets/girl.png" alt="" v-else
                            style="width: 15px;height: 15px;margin-left: 5px;">
                    </div>
                    <div class="state-bar" style="background-color: var(--el-color-primary);" v-if="item.state == 2">
                        签约生效中
                    </div>
                    <div class="state-bar" style="background-color: orange;" v-if="item.state == 0">
                        待签约
                    </div>

                    <div class="state-bar" style="background-color: greenyellow;" v-if="item.state == 1">
                        签约中
                    </div>

                    <div class="state-bar" style="background-color:gray;" v-if="item.state == 3">
                        待续约
                    </div>

                    <div class="tag-bar">
                        <el-tag type="danger" effect="light" round>
                            高血压
                        </el-tag>
                        <el-tag type="primary" effect="light" round>
                            冠心病
                        </el-tag>
                        <el-tag type="warning" effect="light" round>
                            高血糖
                        </el-tag>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { findResidentInfoApi } from '../../../api/resident'
import { useRouter } from 'vue-router'
const total = defineModel()

const router = useRouter()

onMounted(() => {
    findResident()
})

const prop = defineProps(['pageData', 'searchData'])

watch(prop, () => {
    findResident()
}, { deep: true })

// 居民数据
const residentData = ref([])

// 获取居民数据
function findResident() {
    findResidentInfoApi({ ...prop.pageData, ...prop.searchData })
        .then(res => {
            if (res.code == 200) {
                residentData.value = res.data.rows
                total.value = res.data.total
            }
        })
}

// 跳转详情页
function toDetail(data) {
    router.push('/resident/detail/' + data)
}
</script>

<style scoped>
.residentMenu-item {
    width: 200px;
    height: 230px;
    border-radius: 8px;
    box-shadow: 0px 0px 15px rgba(242, 242, 242, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 1);
    cursor: pointer;
}

.card-menu :hover {
    background-color: rgba(242, 247, 251, 1);
    ;
}




.residentMenu-item>img {
    width: 84px;
    width: 84px;
    border-radius: 50%;
    margin-top: 6px;
    margin-bottom: 10px;
}

.state-bar {
    width: 64px;
    height: 24px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    margin-top: 15px;
    border-radius: 16px;
    font-size: 13px;
}

.tag-bar {
    display: inline-block;
    margin-top: 20px;
}

.tag-bar .el-tag:not(:last-child) {
    margin-right: 5px;
}

.name-bar {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: flex-end;
    line-height: 18px;
}

.name-bar span {
    font-size: 12px;
    color: #ccc;
    font-weight: 400;
    margin-right: 5px;
    margin-left: 5px;
    line-height: 12px;
    margin-bottom: 1px;
}

.el-col {
    border-radius: 4px;
    margin-bottom: 15px;
}

.nameBar {
    display: inline-block;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 超出部分显示为省略号 */
    max-width: 80px;

}
</style>